<include src="./templates/html-header.html" path="."></include>
<body>
  <div
    v-cloak
    class="aui-wrapper"
    :class="[
      'aui-header--' + headerSkin,
      'aui-aside--' + asideSkin,
      {
        'aui-header--fixed': headerFixed,
        'aui-aside--fixed': asideFixed,
        'aui-aside--fold': asideFold,
        'aui-aside-control--fixed': asideControlFixed,
        'aui-aside-control--open': asideControlOpen,
        'aui-main-tabs__header--fixed': mainTabsHeaderFixed
      }
    ]"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <!-- aui-header -->
      <include src="./templates/layout-header.html"></include>
      <!-- aui-aside -->
      <include src="./templates/layout-aside.html"></include>
      <!-- aui-aside-control -->
      <include src="./templates/layout-aside-control.html">
        <dl class="aui-aside-control__setting">
          <dt>Main-tabs</dt>
          <dd><el-checkbox v-model="mainTabsHeaderFixed">Header Fixed 固定</el-checkbox></dd>
        </dl>
      </include>
      <!-- aui-main -->
      <main class="aui-main">
        <el-dropdown class="aui-main-tabs__tool">
          <i class="el-icon-arrow-down"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>关闭当前标签页</el-dropdown-item>
            <el-dropdown-item>关闭其它标签页</el-dropdown-item>
            <el-dropdown-item>关闭全部标签页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tabs class="aui-main-tabs aui-tabs" v-model="mainTabsActive">
          <el-tab-pane label="home" name="home" :closable="false" class="aui-main-tabs__pane--full">
            <svg slot="label" class="aui-content--tabs-icon-nav icon-svg" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
            <include src="./templates/pages/index.html"></include>
          </el-tab-pane>
          <el-tab-pane label="标签页2" name="2" closable>标签页2</el-tab-pane>
          <el-tab-pane label="标签页3" name="3" closable>标签页3</el-tab-pane>
          <el-tab-pane label="标签页5" name="5" closable>
            <span slot="label"><i class="el-icon-date"></i> 标签页5</span>
          </el-tab-pane>
          <el-tab-pane label="标签页6" name="6" closable>标签页6</el-tab-pane>
          <el-tab-pane label="标签页7" name="7" closable>标签页7</el-tab-pane>
          <el-tab-pane label="标签页8" name="8" closable>标签页8</el-tab-pane>
          <el-tab-pane label="标签页9" name="9" closable>标签页9</el-tab-pane>
          <el-tab-pane label="标签页10" name="10" closable>标签页10</el-tab-pane>
        </el-tabs>
      </main>
      <!-- aui-footer -->
      <include src="./templates/layout-footer.html"></include>
    </template>
  </div>
  <include src="./templates/html-scripts.html" path="."></include>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            loading: true,
            // 头部, 皮肤 (white 白色 / colorful 鲜艳)
            headerSkin: 'colorful',
            // 头部, 固定状态
            headerFixed: false,
            // 侧边, 皮肤 (white 白色 / dark 黑色)
            asideSkin: 'dark',
            // 侧边, 固定状态
            asideFixed: false,
            // 侧边, 折叠状态
            asideFold: false,
            // 侧边, 菜单选中
            asideMenuActive: 'home-tabs',
            // 搜索
            searchVisible: false,
            search: '',
            // 侧边管理控制
            asideControlFixed: false,
            asideControlOpen: false,
            asideControlTabsActive: 'layout',
            // 主标签页
            mainTabs: [],
            mainTabsActive: 'home',
            mainTabsHeaderFixed: false,
            // 皮肤
            skin: 'orange',
            skinList: [
              { name: 'blue'     , color: '#3E8EF7', remark: '蓝色' },
              { name: 'brown'    , color: '#997B71', remark: '棕色' },
              { name: 'cyan'     , color: '#0BB2D4', remark: '青色' },
              { name: 'gray'     , color: '#757575', remark: '灰色' },
              { name: 'green'    , color: '#11C26D', remark: '绿色' },
              { name: 'indigo'   , color: '#667AFA', remark: '靛青色' },
              { name: 'orange'   , color: '#EB6709', remark: '橙色' },
              { name: 'pink'     , color: '#F74584', remark: '粉红色' },
              { name: 'purple'   , color: '#9463F7', remark: '紫色' },
              { name: 'red'      , color: '#FF4C52', remark: '红色' },
              { name: 'turquoise', color: '#17B3A3', remark: '蓝绿色' },
              { name: 'yellow'   , color: '#FCB900', remark: '黄色' }
            ],
            indexNoticeTabsActive: '1',
            indexPersonalTabsActive: '1'
          }
        },
        watch: {
          headerFixed: function (val) {
            if (!val) {
              vm.asideControlFixed = false;
              vm.mainTabsHeaderFixed = false;
            }
          },
          asideControlFixed: function (val) {
            if (val) {
              vm.headerFixed = true;
            }
          },
          mainTabsHeaderFixed: function (val) {
            if (val) {
              vm.headerFixed = true;
            }
          }
        },
        beforeCreate () {
          vm = this;
        },
        created () {
          vm.loading = false;
          vm.$nextTick(function () {
            // 搜索, 显示／隐藏
            vm.$refs.auiSearchMenu.$el.addEventListener('click', function (e) {
              e.cancelBubble = true;
            });
            vm.$refs.auiSearch.addEventListener('click', function (e) {
              e.cancelBubble = true;
            });
            window.addEventListener('click', function (e) {
              if (vm.searchVisible) {
                vm.searchVisible = false;
              }
            });
          });
        },
        methods: {
          // 跳转页面
          gotoPageHandle: function (url) {
            window.location.href = url;
          },
          // 皮肤切换
          skinChangeHandle: function (val) {
            var styleList = [
              {
                id: 'J_elementTheme',
                url: './element-theme/' + val + '/index.css?t=' + new Date().getTime()
              },
              {
                id: 'J_auiSKin',
                url: './css/aui-' + val + '.min.css?t=' + new Date().getTime()
              }
            ]
            for (var i = 0; i < styleList.length; i++) {
              var el = document.querySelector('#' + styleList[i].id)
              if (el) {
                el.href = styleList[i].url
                continue
              }
              el = document.createElement('link')
              el.id = styleList[i].id
              el.href = styleList[i].url
              el.rel = 'stylesheet'
              document.querySelector('head').appendChild(el)
            }
          }
        }
      });
    })();
  </script>
</body>
</html>
